<template>
  <button @click="$emit('click')" class="flex items-center p-4 rounded-lg shadow-sm hover:shadow-md transition-all"
    :class="color">
    <div class="p-3 rounded-full bg-white bg-opacity-20 mr-3">
      <slot name="icon">
        <span class="text-white text-xl">{{ icon }}</span>
      </slot>
    </div>
    <div class="text-left">
      <div class="text-white font-medium">{{ title }}</div>
      <div class="text-white text-opacity-80 text-sm">点击进入</div>
    </div>
  </button>
</template>

<script setup>
defineProps({
  title: String,
  icon: String,
  color: {
    type: String,
    default: 'bg-gray-500'
  }
})

defineEmits(['click'])
</script>